import { Form, Input, InputNumber, Table } from 'antd';
import React from 'react';
import { useModel } from '@umijs/max';
import './index.less';

export default ({ dataSource, originColumns, onDataChange, rowId }) => {
  const { Disabled, Rent } = useModel('Goods');

  const columns = originColumns.map((col) => {
    if (!col.editable) {
      return col;
    } else {
      const { title, dataIndex, type, notPrice, inputWidth } = col;

      return {
        title,
        dataIndex,
        render: (_, record, index) => {
          let disabled = false;
          if (dataIndex.includes('period_id_')) {
            console.log('dataIndex', dataIndex, record, Rent);
            const rentId = record.rent_plan_id;
            const periodId = Number(dataIndex.replace('period_id_', ''));
            console.log('periodId', dataIndex, rentId, periodId);
            disabled = !Rent.find(
              (r) =>
                r.id === rentId && r.rent_period && r.rent_period.find((i) => i.id === periodId),
            );
            console.log('disabled', disabled);
          }
          const dataName = `${record.id}-${dataIndex}`;
          return (
            <Form.Item
              style={{
                margin: 0,
              }}
              name={dataName}
              rules={
                disabled
                  ? null
                  : [
                      {
                        required: true,
                        message: '',
                      },
                      {
                        validator: (rule, value) => {
                          if (!value || Number(value) === 0) {
                            return Promise.reject();
                          } else {
                            return Promise.resolve();
                          }
                        },
                      },
                    ]
              }
            >
              {type === 'number' ? (
                <InputNumber
                  controls={false}
                  precision={notPrice ? 0 : 2}
                  prefix={notPrice ? '' : '￥'}
                  disabled={Disabled || disabled}
                  defaultValue={0}
                  onChange={(e) => handleChange(e, record, index, dataIndex)}
                  className="editable-cell-value-wrap"
                  style={{ width: inputWidth + 'px' }}
                />
              ) : (
                <Input
                  className="editable-cell-value-wrap"
                  disabled={Disabled || disabled}
                  onChange={(e) => handleChange(e.target.value)}
                  width={inputWidth}
                />
              )}
            </Form.Item>
          );
        },
      };
    }
  });

  const handleChange = (value, record, index, dataIndex) => {
    onDataChange(value, index, dataIndex);
  };

  return (
    <Table
      rowClassName={() => 'editable-row'}
      bordered
      dataSource={dataSource}
      columns={columns}
      rowKey="id"
      pagination={false}
    />
  );
};
